<template>
	<view class="notOpened">
		<view class="topBg">
			<view class="title">
				<text @click="buyHistory">购买记录</text>
			</view>
			<view class="grade" :style="{ 'backgroundImage': 'url(' + radiusLine + ')' }">
				<view>
					<view>
						<text @click="change(1)" v-if="nowNum!=0">{{vipList[nowNum].prevLevelName || '--'}}</text>
						<text @click="change(1)" v-else>{{"-"}}</text>
					</view>
				</view>
				<view>
					<view><text>{{ vipList[nowNum].vipName }}</text></view>
				</view>
				<view>
					<view>
						<text @click="change(2)" v-if="nowNum==(vipList.length-1)">{{'-'}}</text>
						<text @click="change(2)" v-else>{{ vipList[nowNum].nextLevelName}}</text>
					</view>
				</view>
			</view>
			<view class="vipLogo" :style="{ 'backgroundImage': 'url(' + quanyiBG + ')' }">
				<view class="headerIcon">
					<u-icon name="account-fill" color="#C3C7CD" size="60"></u-icon>
				</view>
				<view class="userPhone">
					<view>{{ tel&&tel.replace(/(\d{3})\d{4}(\d{4})/,"$1****$2") || "-"}}</view>
					<view v-if="isOpen==2">开通会员福利不限量</view>
					<view v-if="isOpen==3">{{ noVipDataDetail.vipName }}已于{{nonoVipDataDetail.expirationEndDate}}过期</view>
					<view v-if="isOpen==1">{{ noVipDataDetail.vipName }}将于{{noVipDataDetail.expirationEndDate}}过期</view>
				</view>
			</view>
		</view>

		<!--
			yearlyContinuousEnabled: 2  包年连续包年(1-启用 2-关闭)

			yearlyDiscountEnabled: 1    包年首开特惠(1-启用 2-关闭)
			yearlyDiscountPrice: 0.1    包年首开特惠价格
			yearlyEnabled: 1   包年设置(1-开启 2-关闭)
			yearlyPrice: 1     包年单价(元)
			立减多少  yearlyPrice-yearlyDiscountPrice
		-->
		<view class="package">
			<view class="membersList">
				<!-- {{ isOpen }} -->

				<!-- this.noVipDataDetail.isOpen 
					isOpen 1、已开通 2、未开通 3、已过期 -->

				<!-- 只有未开通会员情况下 才显示首开特惠 -->
				<view class="memberScrollList" v-if="isOpen==2">
					<!-- 首开特惠-->
					<view class="memberItem" v-if="noVipDataDetail.yearlyDiscountEnabled == 1"
						@tap="setMemberIndex('year1')">
						<view class="tehui" v-if="noVipDataDetail.yearlyDiscountEnabled == 1">首开特惠</view>
						<image class="checked" v-if="getMemberIndex=='year1'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包年</view>
						<view v-if="noVipDataDetail.yearlyDiscountEnabled == 1" style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyDiscountPrice | toFixedF }}</view>
						<view v-if="noVipDataDetail.yearlyDiscountEnabled == 2" style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyPrice | toFixedF }}</view>
						<view v-if="noVipDataDetail.yearlyDiscountEnabled == 1" style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.yearlyPrice | toFixedF }}</view>
						<view class="lijian" v-if="noVipDataDetail.yearlyDiscountEnabled == 1">
							立减{{(noVipDataDetail.yearlyPrice-noVipDataDetail.yearlyDiscountPrice) | toFixedF}}元
						</view>
					</view>
					<view class="memberItem" v-else-if="noVipDataDetail.yearlyEnabled == 1" @tap="setMemberIndex('year3')">
						<image class="checked" v-if="getMemberIndex=='year3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyPrice | toFixedF  }}</view>
					</view>

					<view class="memberItem" v-if="noVipDataDetail.halfDiscountEnabled == 1"
						@tap="setMemberIndex('half1')">
						<view class="tehui" v-if="noVipDataDetail.halfDiscountEnabled == 1">首开特惠</view>
						<image class="checked" v-if="getMemberIndex=='half1'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包半年</view>
						<view v-if="noVipDataDetail.halfDiscountEnabled == 1" style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfDiscountPrice | toFixedF }}</view>
						<view v-if="noVipDataDetail.halfDiscountEnabled == 2" style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfPrice | toFixedF }}</view>
						<view v-if="noVipDataDetail.halfDiscountEnabled == 1" style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.halfPrice | toFixedF }}</view>
						<view class="lijian" v-if="noVipDataDetail.halfDiscountEnabled == 1">
							立减{{(noVipDataDetail.halfPrice-noVipDataDetail.halfDiscountPrice) | toFixedF}}元
						</view>
					</view>
					<view class="memberItem" v-else-if="noVipDataDetail.halfEnabled == 1" @tap="setMemberIndex('half3')">
						<image class="checked" v-if="getMemberIndex=='half3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包半年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfPrice | toFixedF  }}</view>
					</view>
					
					<view class="memberItem"
						v-if="noVipDataDetail.quarterlyDiscountEnabled == 1"
						@tap="setMemberIndex('quarterly1')">
						<view class="tehui" v-if="noVipDataDetail.quarterlyDiscountEnabled == 1">首开特惠</view>
						<image class="checked" v-if="getMemberIndex=='quarterly1'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包季</view>
						<view v-if="noVipDataDetail.quarterlyDiscountEnabled == 1" style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyDiscountPrice | toFixedF }}</view>
						<view v-if="noVipDataDetail.quarterlyDiscountEnabled == 2" style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyPrice | toFixedF }}</view>
						<view v-if="noVipDataDetail.quarterlyDiscountEnabled == 1" style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.quarterlyPrice | toFixedF }}</view>
						<view class="lijian" v-if="noVipDataDetail.quarterlyDiscountEnabled == 1">
							立减{{(noVipDataDetail.quarterlyPrice-noVipDataDetail.quarterlyDiscountPrice) | toFixedF}}元
						</view>
					</view>
					<view class="memberItem" v-else-if="noVipDataDetail.quarterlyEnabled == 1" @tap="setMemberIndex('quarterly3')">
						<image class="checked" v-if="getMemberIndex=='quarterly3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包季</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyPrice | toFixedF  }}</view>
					</view>

					<view class="memberItem" v-if="noVipDataDetail.monthlyDiscountEnabled == 1"
						@tap="setMemberIndex('monthly1')">
						<view class="tehui" v-if="noVipDataDetail.monthlyDiscountEnabled == 1">首开特惠</view>
						<image class="checked" v-if="getMemberIndex=='monthly1'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包月</view>
						<view v-if="noVipDataDetail.monthlyDiscountEnabled == 1" style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyDiscountPrice | toFixedF }}</view>
						<view v-if="noVipDataDetail.monthlyDiscountEnabled == 2" style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyPrice | toFixedF }}</view>
						<view v-if="noVipDataDetail.monthlyDiscountEnabled == 1" style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.monthlyPrice | toFixedF }}</view>
						<view class="lijian" v-if="noVipDataDetail.monthlyDiscountEnabled == 1">
							立减{{(noVipDataDetail.monthlyPrice-noVipDataDetail.monthlyDiscountPrice) | toFixedF}}元
						</view>
					</view>
					<view class="memberItem" v-else-if="noVipDataDetail.monthlyEnabled == 1" @tap="setMemberIndex('monthly3')">
						<image class="checked" v-if="getMemberIndex=='monthly3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyPrice | toFixedF  }}</view>
					</view>

					<!-- 连续包 -->
					<!-- <view class="memberItem" v-if="noVipDataDetail.yearlyContinuousEnabled==1"
						@tap="setMemberIndex('year2')">
						<image class="checked" v-if="getMemberIndex=='year2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyContinuousDuration.toFixed(2)||'-' }}
						</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{noVipDataDetail.yearlyPrice.toFixed(2)}}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.yearlyPrice-noVipDataDetail.yearlyContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.halfContinuousEnabled==1"
						@tap="setMemberIndex('half2')">
						<image class="checked" v-if="getMemberIndex=='half2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包半年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfContinuousDuration.toFixed(2)|| '-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.halfPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.halfPrice-noVipDataDetail.halfContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.quarterlyContinuousEnabled==1"
						@tap="setMemberIndex('quarterly2')">
						<image class="checked" v-if="getMemberIndex=='quarterly2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包季</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyContinuousDuration.toFixed(2)|| '-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.quarterlyPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.quarterlyPrice-noVipDataDetail.quarterlyContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.monthlyContinuousEnabled==1"
						@tap="setMemberIndex('monthly2')">
						<image class="checked" v-if="getMemberIndex=='monthly2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyContinuousDuration.toFixed(2)||'-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.monthlyPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{ (noVipDataDetail.monthlyPrice-noVipDataDetail.monthlyContinuousDuration).toFixed(2) }}元
						</view>
					</view> -->
					
					<!-- 单价买 -->
					<!-- <view class="memberItem" v-if="noVipDataDetail.yearlyEnabled==1" @tap="setMemberIndex('year3')">
						<image class="checked" v-if="getMemberIndex=='year3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">12个月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyPrice.toFixed(2)|| '-' }}</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.halfEnabled==1" @tap="setMemberIndex('half3')">
						<image class="checked" v-if="getMemberIndex=='half3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">6个月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfPrice.toFixed(2)|| '-' }}</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.quarterlyEnabled==1" @tap="setMemberIndex('quarterly3')">
						<image class="checked" v-if="getMemberIndex=='quarterly3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">3个月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyPrice.toFixed(2)|| '-' }}</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.monthlyEnabled==1" @tap="setMemberIndex('monthly3')">
						<image class="checked" v-if="getMemberIndex=='monthly3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">1个月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyPrice.toFixed(2)||'-' }}</view>
					</view> -->
				</view>
				<!-- 已开通或者已过期 不显示首开特惠 -->
				<view class="memberScrollList" v-else>
					<!-- 首开特惠-->
					<view class="memberItem" v-if="noVipDataDetail.yearlyEnabled == 1"
						@tap="setMemberIndex('year3')">
						<image class="checked" v-if="getMemberIndex=='year3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyPrice | toFixedF }}</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.halfEnabled == 1"
						@tap="setMemberIndex('half3')">
						<image class="checked" v-if="getMemberIndex=='half3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包半年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfPrice | toFixedF }}</view>
					</view>
					<view class="memberItem"
						v-if="noVipDataDetail.quarterlyEnabled == 1"
						@tap="setMemberIndex('quarterly3')">
						<view class="tehui" v-if="noVipDataDetail.quarterlyDiscountEnabled == 1">首开特惠</view>
						<image class="checked" v-if="getMemberIndex=='quarterly3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包季</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyPrice | toFixedF }}</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.monthlyEnabled == 1"
						@tap="setMemberIndex('monthly3')">
						<view class="tehui" v-if="noVipDataDetail.monthlyDiscountEnabled == 1">首开特惠</view>
						<image class="checked" v-if="getMemberIndex=='monthly3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">包月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyPrice | toFixedF }}</view>
					</view>
					<!-- 连续包 -->
					<!-- <view class="memberItem" v-if="noVipDataDetail.yearlyContinuousEnabled==1"
						@tap="setMemberIndex('year2')">
						<image class="checked" v-if="getMemberIndex=='year2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyContinuousDuration.toFixed(2)||'-' }}
						</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{noVipDataDetail.yearlyPrice.toFixed(2)}}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.yearlyPrice-noVipDataDetail.yearlyContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.halfContinuousEnabled==1"
						@tap="setMemberIndex('half2')">
						<image class="checked" v-if="getMemberIndex=='half2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包半年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfContinuousDuration.toFixed(2)|| '-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.halfPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.halfPrice-noVipDataDetail.halfContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.quarterlyContinuousEnabled==1"
						@tap="setMemberIndex('quarterly2')">
						<image class="checked" v-if="getMemberIndex=='quarterly2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包季</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyContinuousDuration.toFixed(2)|| '-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.quarterlyPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.quarterlyPrice-noVipDataDetail.quarterlyContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.monthlyContinuousEnabled==1"
						@tap="setMemberIndex('monthly2')">
						<image class="checked" v-if="getMemberIndex=='monthly2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyContinuousDuration.toFixed(2)||'-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.monthlyPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{ (noVipDataDetail.monthlyPrice-noVipDataDetail.monthlyContinuousDuration).toFixed(2) }}元
						</view>
					</view> -->
					
					<!-- 单价买 -->
					<!-- <view class="memberItem" v-if="noVipDataDetail.yearlyEnabled==1" @tap="setMemberIndex('year3')">
						<image class="checked" v-if="getMemberIndex=='year3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">12个月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyPrice.toFixed(2)|| '-' }}</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.halfEnabled==1" @tap="setMemberIndex('half3')">
						<image class="checked" v-if="getMemberIndex=='half3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">6个月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfPrice.toFixed(2)|| '-' }}</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.quarterlyEnabled==1" @tap="setMemberIndex('quarterly3')">
						<image class="checked" v-if="getMemberIndex=='quarterly3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">3个月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyPrice.toFixed(2)|| '-' }}</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.monthlyEnabled==1" @tap="setMemberIndex('monthly3')">
						<image class="checked" v-if="getMemberIndex=='monthly3'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">1个月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyPrice.toFixed(2)||'-' }}</view>
					</view> -->
				</view>
			</view>
			<!-- <view class="tips">到期前一天44元/月自动续费，可随时取消</view> -->
		</view>
		<view class="rewardBox">
			<view class="title" :style="{ backgroundImage: 'url(' + titleBg + ')' }">{{status==1?'我的权益':'专享权益'}}</view>
			<view class="integralCouponList" v-if="isQY">
				<view class="integralCouponItem" v-if="list.equityServiceDiscountsStr">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_youhuiquan%2013435170720801394849.png`">
						</image>
						<view class="text-1">服务费单价</view>
					</view>
					<view class="tip">{{list.equityServiceDiscountsStr}}</view>
				</view>
				<view class="integralCouponItem" v-if="list.equityBoundsStr">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_jianglijin3703530708666233956.png`">
						</image>
						<view class="text-1">奖励金</view>
					</view>
					<view class="tip">{{list.equityBoundsStr}}</view>
				</view>
				<view class="integralCouponItem" v-if="list.discountLimitCountstr">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_mianfuwucishu1479319900652158668.png`">
						</image>
						<view class="text-1">免服务费次数</view>
					</view>
					<view class="tip">{{list.discountLimitCountstr}}</view>
				</view>
				<view class="integralCouponItem" v-if="list.equityPointsStr">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_jifen2011325536646060104216.png`">
						</image>
						<view class="text-1">积分</view>
					</view>
					<view class="tip">{{list.equityPointsStr}}</view>
				</view>
				<view class="integralCouponItem" v-if="list.equityCouponStr">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_youhuiquan%2013435170720801394849.png`">
						</image>
						<view class="text-1">优惠券</view>
					</view>
					<view class="tip">{{list.equityCouponStr}}</view>
				</view>
				<view class="integralCouponItem" v-if="list.equityCardStr">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon-kabao.png`">
						</image>
						<view class="text-1">卡</view>
					</view>
					<view class="tip">{{list.equityCardStr}}</view>
				</view>
			</view>
			<view class="integralCouponList" v-if="!isQY">
				<view class="none">暂无数据</view>
			</view>
			<view style="display:flex;align-items:center;">
				<view class="my-line"></view>
				<view class="my-dot"></view>
				<view class="title" style="color: #C19C68;">卡券</view>
				<view class="my-dot"></view>
				<view class="my-line"></view>
			</view>
			<view class="cashCouponList" v-if="isKJ">
				<view class="cashCouponItem" v-for="(item,index) in list.couponVoList" :key="index"
					:style="{ backgroundImage: 'url(' + integralBg + ')' }">
					<view>{{ item.couponTypeStr }}</view>
					<view>
						<text style="font-size:20rpx;" v-if="item.couponTypeStr!='折扣券'">¥</text>
						{{ item.couponQuota }}
						<text style="font-size:20rpx;" v-if="item.couponTypeStr=='折扣券'">折 </text>
						<text style="font-size:22rpx;" v-if="item.num>1">X{{ item.num }}</text>  
					</view>
					<view>满{{item.useSillStr}}可用</view>
				</view>
				<view class="cashCouponItem" v-for="(item,index) in list.cardVoList" :key="index"
					:style="{ backgroundImage: 'url(' + integralBg + ')' }">
					<template  v-if="item.cardTypeStr=='次数卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}次
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
						<view>低于{{item.useSillStr}}可用</view>
					</template>
					<template  v-if="item.cardTypeStr=='电量卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}度
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
					</template>
					<template v-if="item.cardTypeStr=='折扣卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}折
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
						<view>满{{item.useSillStr}}可用</view>
					</template>
				</view>
			</view>
			<view class="cashCouponList" v-if="!isKJ">
				<view class="none">暂无数据</view>
			</view>
		</view>
		<view class="desc">
			<view class="activityTitle">活动说明</view>
			<view class="activityLine"></view>
			<view class="activityContent" v-if="sellerNo=='hyc'">
				<view style="font-size: 32rpx; font-weight: bold;">一、VIP会员</view>
				<view>1.会员权益一经购买立即生效，生效后不支持退款</view>
				<view>2.会员有效期：目前有月卡、季卡、年卡可供选择，例：购买月卡后，自购买之日起，30天后失效</view>
				<view>3.服务费优惠：会员有效期内，可享受服务费折扣6折，例：服务费为0.65元/度，则打折后服务费为0.65*0.6=0.39元/度</view>
				<view>4.用户在同一时间段内仅限生效一张会员卡，如若购买多次，则按生效时间依次生效</view>
				<view style="font-size: 32rpx; font-weight: bold;">二、电量卡</view>
				<view>1.购买后立即生效，电量卡一经抵扣，结余电量不支持申请退款</view>
				<view>2.电量卡购买后有效期为30天，有效期内电量卡未抵扣完结余电量可顺延30天，超时失效</view>
				<view>3.使用电量卡抵扣时，如电量卡剩余电量不足以抵扣，超出部分电量则按照站点原价计算费用</view>
			</view>
			<view class="activityContent" v-else>
				<view>1.服务费优惠：付费会员期间，可享受服务费折扣</view>
				<view>2.奖励金：虚拟金额，可抵扣服务费，不可提现</view>
				<view>3.免服务费次数：可全额减免服务费次数</view>
				<view>4.积分：积分与成长等级会员关联，可享受成长等级会员权益</view>
				<view>5.优惠券：可用于订单金额减免</view>
			</view>
		</view>
		<view style="width: 100%;height: 130rpx;"></view>
		<view class="mingxiMask" v-if="showMingxi"></view>
		<view :class="showMingxi?'bottomBtn2':'bottomBtn'">
			<view class="bottomBtn_top" v-if="showMingxi">
				<view class="title">支付明细
					<view class="closeIcon">
						<u-icon name="close" @click="showMingxi=false" color="#909399" size="28"></u-icon>
					</view>
				</view>
				<view class="productItem">
					<view>商品</view>
					<view>
						<view>{{name}}</view>
						<view>￥{{ buyPrice || '-' }}</view>
					</view>
				</view>
				<view class="productItem" style="margin-top: 10rpx;">
					<view>优惠</view>
					<view>
						<view>超值优惠</view>
						<view>￥{{discount!=null?discount: '-' }}</view>
					</view>
				</view>
			</view>
			<view class="bottomBtn">
				<view class="left">
					<view class="left_top">
						<view style="font-size: 32rpx;font-weight: bold;color: #FC724C;">￥{{ buyPrice }}</view>
						<view style="font-size: 22rpx;color: #FC724C;margin: 0 10rpx;" v-if="discount!=null">
							已优惠￥{{discount}}元</view>
						<view :style="{ 'color': color }"
							style="display: flex;flex-direction:row;font-size: 24rpx;margin-left: 10rpx;" @click="openMX">
							明细<u-icon name="arrow-up" :color="color" size="28" v-if="show"></u-icon>
						</view>
					</view>
					<view class="left_bottom" @click="toAgreement">
						请阅读《<span style="color:#6DB12E">vip会员协议</span>》
					</view>
				</view>
				<view class="right" @click="confirmAndOpen()" :style="{ 'backgroundColor': color }">
					确认协议并{{isOpen==2?'开通':'续费'}}</view>
			</view>
		</view>
		<u-modal :show="showPayResult" title="温馨提示" :content='payResultContent' confirmText="我知道了"
			@confirm="closeConfirm"></u-modal>
	</view>
</template>

<script>
	import {
	noVipDetail,
	vipInfos
} from '@/api/marketing/vip';
	var https_1 = require('@/api/https.js');
	const app = getApp();
	export default {
		data() {
			return {
				show:false,
				sellerNo: app.globalData.sellerNo,

				imgUrlBase: `${app.globalData.imgUrl}/group1/image`,
				imgUrlBase2: `${app.globalData.imgUrl}/group1/operateSchemeImage`,
				tel: uni.getStorageSync('tel'),
				showPayResult: false,
				payResultContent: '很抱歉，暂不支持',
				showMingxi: false,
				noVipDataDetail: {},
				color: uni.getStorageSync('defaultColor_Green'),
				checkboxselIcon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/checkboxsel.png`,
				radiusLine: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/radiusLine.png`,
				quanyiBG: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/bgQuanyi.png`,
				getMemberIndex: '',
				titleBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/title_bg.png`,
				redBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/Red-bg.png`,
				integralBg: `${app.globalData.imgUrl}/group1/image/bg-红包5991183492684728172.png`,
				optionsId: null,
				choseItem: "",
				buyPrice: 0.00,
				discount: null,
				name: '',
				list: "",
				isQY: false,
				isKJ: false,
				status: 2,
				vipList: [],
				nowNum: null,
				from: null,
				isOpen: null,
				meId: null,

				// 当前选中的会员信息
				choseItemDetail: {}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {
			// this.getMyVipDetail()
			setTimeout(()=>{
				this.show = true
			},500)
			
		},
		onLoad(options) {
			if (options.id) {
				this.optionsId = options.id;
				this.getVipInfo(this.optionsId)
			}
			// this.from = options.from
			// if (this.from == "buy") {
			// 	this.status = 1
			// }
			if (options.remId) {
				this.meId = options.remId
			}
			this.getVipList()
		},
		methods: {
			getVipList() {
				noVipDetail().then(res => {
					if (res.code == 200) {
						this.vipList = res.data
						this.vipList.forEach((item, index) => {
							if (this.optionsId == item.vipId) {
								this.nowNum = index
							}
						})
						if(!this.nowNum && this.nowNum !==0 ){
							this.nowNum = this.vipList.length - 1
						}
					}
				})
			},
			getVipInfo(id) {
				vipInfos(id).then(res => {
					if (res.code == 200) {
						this.noVipDataDetail = res.data[0]
						uni.setNavigationBarTitle({
							title: this.noVipDataDetail.memberName || '权益中心'
						});
						this.list = this.noVipDataDetail.marketVipExclusiveBenefitsVo
						if (!this.list) {
							this.isQY = false
							this.isKJ = false
						} else {
							if (
								!this.list.discountLimitCountstr &&
								!this.list.equityBoundsStr &&
								!this.list.equityCouponStr &&
								!this.list.equityPointsStr &&
								!this.list.equityServiceDiscountsStr
							) {
								this.isQY = false;
							} else {
								this.isQY = true;
							}
							if (!this.list.cardVoList && !this.list.couponVoList) {
								this.isKJ = false;
							} else {
								this.isKJ = true;
							}

							// 处理卡里面的次数卡数值
							if (this.list.cardVoList?.length > 0) {
								this.list.cardVoList.forEach((vm, index) => {
									if(vm.cardTypeStr=='次数卡'){
										vm.cardQuota = Math.round(vm.cardQuota)
									}
								})
							} else {
								this.list.cardVoList = null;
							}
						}
						if (this.noVipDataDetail.isOpen) {
							// isOpen 1、已开通 2、未开通 3、已过期
							this.isOpen = this.noVipDataDetail.isOpen
							console.log(this.meId)
							console.log(this.noVipDataDetail.id)
						}
						this.$set(this.noVipDataDetail)
					}
				})
			},
			change(num) { //1:上一级 2:下一级
				if (num == 1) {
					if (this.nowNum > 0) {
						this.getMemberIndex = ''
						this.buyPrice = 0.00
						this.discount = null
						this.choseItem = ""
						this.optionsId = this.vipList[this.nowNum - 1].vipId
						this.getVipInfo(this.optionsId)
						this.getVipList()
					} else {
						uni.showToast({
							title: '已是最低等级!',
							icon: 'none'
						});
					}
				}
				if (num == 2) {
					if (this.nowNum < this.vipList.length - 1) {
						this.getMemberIndex = ''
						this.buyPrice = 0.00
						this.discount = null
						this.choseItem = ""
						this.optionsId = this.vipList[this.nowNum + 1].vipId
						this.getVipInfo(this.optionsId)
						this.getVipList()
					} else {
						uni.showToast({
							title: '已是最高等级!',
							icon: 'none'
						});
					}
				}
			},
			openMX() {
				if (this.choseItem != '') {
					this.showMingxi = true
				} else {
					uni.showToast({
						title: '请选择档次!',
						icon: 'none'
					});
				}
			},
			closeConfirm() {
				this.showPayResult = false;
			},
			confirmAndOpen() {
				let that = this;
				if (this.choseItem == '') {
					uni.showToast({
						title: '请选择档次!',
						icon: 'none',
						duration: 1500
					});
					return
				}
				console.log(this.meId,'meId')
				console.log(this.noVipDataDetail.id,'noVipDataDetail.id')

				if (that.noVipDataDetail.id < that.meId) {
					uni.showToast({
						title: '请选择等级高一点的会员！',
						icon: 'none',
						duration: 1500
					});
					return
				}
				let name = this.getMemberIndex
				let data = ''
				switch (name) {
					case 'year1':
						data = {
							yearlyDiscountEnabled: this.noVipDataDetail.yearlyDiscountEnabled,
							yearlyDiscountPrice: this.noVipDataDetail.yearlyDiscountPrice,
							yearlyContinuousEnabled: this.noVipDataDetail.yearlyContinuousEnabled,
							yearlyContinuousDuration: this.noVipDataDetail.yearlyContinuousDuration,
							yearlyEnabled: this.noVipDataDetail.yearlyEnabled,
							yearlyPrice: this.noVipDataDetail.yearlyPrice
						}
						break;
					case 'half1':
						data = {
							halfDiscountEnabled: this.noVipDataDetail.halfDiscountEnabled,
							halfDiscountPrice: this.noVipDataDetail.halfDiscountPrice,
							halfContinuousEnabled: this.noVipDataDetail.halfContinuousEnabled,
							halfContinuousDuration: this.noVipDataDetail.halfContinuousDuration,
							halfEnabled: this.noVipDataDetail.halfEnabled,
							halfPrice: this.noVipDataDetail.halfPrice
						}
						break;
					case 'quarterly1':
						data = {
							quarterlyDiscountEnabled: this.noVipDataDetail.quarterlyDiscountEnabled,
							quarterlyDiscountPrice: this.noVipDataDetail.quarterlyDiscountPrice,
							quarterlyContinuousEnabled: this.noVipDataDetail.quarterlyContinuousEnabled,
							quarterlyContinuousDuration: this.noVipDataDetail.quarterlyContinuousDuration,
							quarterlyEnabled: this.noVipDataDetail.quarterlyEnabled,
							quarterlyPrice: this.noVipDataDetail.quarterlyPrice
						}
						break;
					case 'monthly1':
						data = {
							monthlyDiscountEnabled: this.noVipDataDetail.monthlyDiscountEnabled,
							monthlyDiscountPrice: this.noVipDataDetail.monthlyDiscountPrice,
							monthlyContinuousEnabled: this.noVipDataDetail.monthlyContinuousEnabled,
							monthlyContinuousDuration: this.noVipDataDetail.monthlyContinuousDuration,
							monthlyEnabled: this.noVipDataDetail.monthlyEnabled,
							monthlyPrice: this.noVipDataDetail.monthlyPrice
						}
						break;
					case 'year2':
						data = {
							yearlyDiscountEnabled: this.noVipDataDetail.yearlyDiscountEnabled,
							yearlyDiscountPrice: this.noVipDataDetail.yearlyDiscountPrice,
							yearlyContinuousEnabled: this.noVipDataDetail.yearlyContinuousEnabled,
							yearlyContinuousDuration: this.noVipDataDetail.yearlyContinuousDuration,
							yearlyEnabled: this.noVipDataDetail.yearlyEnabled,
							yearlyPrice: this.noVipDataDetail.yearlyPrice
						}
						break;
					case 'half2':
						data = {
							halfDiscountEnabled: this.noVipDataDetail.halfDiscountEnabled,
							halfDiscountPrice: this.noVipDataDetail.halfDiscountPrice,
							halfContinuousEnabled: this.noVipDataDetail.halfContinuousEnabled,
							halfContinuousDuration: this.noVipDataDetail.halfContinuousDuration,
							halfEnabled: this.noVipDataDetail.halfEnabled,
							halfPrice: this.noVipDataDetail.halfPrice
						}
						break;
					case 'quarterly2':
						data = {
							quarterlyDiscountEnabled: this.noVipDataDetail.quarterlyDiscountEnabled,
							quarterlyDiscountPrice: this.noVipDataDetail.quarterlyDiscountPrice,
							quarterlyContinuousEnabled: this.noVipDataDetail.quarterlyContinuousEnabled,
							quarterlyContinuousDuration: this.noVipDataDetail.quarterlyContinuousDuration,
							quarterlyEnabled: this.noVipDataDetail.quarterlyEnabled,
							quarterlyPrice: this.noVipDataDetail.quarterlyPrice
						}
						break;
					case 'monthly2':
						data = {
							monthlyDiscountEnabled: this.noVipDataDetail.monthlyDiscountEnabled,
							monthlyDiscountPrice: this.noVipDataDetail.monthlyDiscountPrice,
							monthlyContinuousEnabled: this.noVipDataDetail.monthlyContinuousEnabled,
							monthlyContinuousDuration: this.noVipDataDetail.monthlyContinuousDuration,
							monthlyEnabled: this.noVipDataDetail.monthlyEnabled,
							monthlyPrice: this.noVipDataDetail.monthlyPrice
						}
						break;
					case 'year3':
						data = {
							yearlyDiscountEnabled: this.noVipDataDetail.yearlyDiscountEnabled,
							yearlyDiscountPrice: this.noVipDataDetail.yearlyDiscountPrice,
							yearlyContinuousEnabled: this.noVipDataDetail.yearlyContinuousEnabled,
							yearlyContinuousDuration: this.noVipDataDetail.yearlyContinuousDuration,
							yearlyEnabled: this.noVipDataDetail.yearlyEnabled,
							yearlyPrice: this.noVipDataDetail.yearlyPrice
						}
						break;
					case 'half3':
						data = {
							halfDiscountEnabled: this.noVipDataDetail.halfDiscountEnabled,
							halfDiscountPrice: this.noVipDataDetail.halfDiscountPrice,
							halfContinuousEnabled: this.noVipDataDetail.halfContinuousEnabled,
							halfContinuousDuration: this.noVipDataDetail.halfContinuousDuration,
							halfEnabled: this.noVipDataDetail.halfEnabled,
							halfPrice: this.noVipDataDetail.halfPrice
						}
						break;
					case 'quarterly3':
						data = {
							quarterlyDiscountEnabled: this.noVipDataDetail.quarterlyDiscountEnabled,
							quarterlyDiscountPrice: this.noVipDataDetail.quarterlyDiscountPrice,
							quarterlyContinuousEnabled: this.noVipDataDetail.quarterlyContinuousEnabled,
							quarterlyContinuousDuration: this.noVipDataDetail.quarterlyContinuousDuration,
							quarterlyEnabled: this.noVipDataDetail.quarterlyEnabled,
							quarterlyPrice: this.noVipDataDetail.quarterlyPrice
						}
						break;
					case 'monthly3':
						data = {
							monthlyDiscountEnabled: this.noVipDataDetail.monthlyDiscountEnabled,
							monthlyDiscountPrice: this.noVipDataDetail.monthlyDiscountPrice,
							monthlyContinuousEnabled: this.noVipDataDetail.monthlyContinuousEnabled,
							monthlyContinuousDuration: this.noVipDataDetail.monthlyContinuousDuration,
							monthlyEnabled: this.noVipDataDetail.monthlyEnabled,
							monthlyPrice: this.noVipDataDetail.monthlyPrice
						}
						break;
				}
				data.purchasedPaymentRuleId = this.optionsId
				data.levelBenefits = this.noVipDataDetail.levelBenefits
				data.levelBenefitsId = this.noVipDataDetail.levelBenefitsId
				data.discountLimit = this.noVipDataDetail.discountLimit
				data.discountLimitCount = this.noVipDataDetail.discountLimitCount
				data.generalRightsEnabled = this.noVipDataDetail.generalRightsEnabled
				data.inMember = this.noVipDataDetail.inMember || ''
				// 营销获客1.0的会员支付方式
				uni.navigateTo({
					url: '/marketing_page/pages/member/pay_page/pay_page?data=' +
						encodeURIComponent(JSON.stringify(this.choseItemDetail)) + '&save=' + encodeURIComponent(
							JSON.stringify(data))
				});
				console.log('choseItemDetail', this.choseItemDetail)
			},
			setMemberIndex(val) {
				this.getMemberIndex = val;
				//首开特惠
				if (val == 'year1') {
					this.choseItem = {
						name: '包年',
						enabled: this.noVipDataDetail.yearlyDiscountEnabled, //开关
						price1: this.noVipDataDetail.yearlyDiscountPrice.toFixed(2), //价格1
						price2: this.noVipDataDetail.yearlyPrice.toFixed(2), //价格2
						discount: (this.noVipDataDetail.yearlyPrice - this.noVipDataDetail.yearlyDiscountPrice)
							.toFixed(2) //优惠
					}
				}
				if (val == 'half1') {
					this.choseItem = {
						name: '包半年',
						enabled: this.noVipDataDetail.halfDiscountEnabled,
						price1: this.noVipDataDetail.halfDiscountPrice.toFixed(2),
						price2: this.noVipDataDetail.halfPrice.toFixed(2),
						discount: (this.noVipDataDetail.halfPrice - this.noVipDataDetail.halfDiscountPrice).toFixed(2)
					}
				}
				if (val == 'quarterly1') {
					this.choseItem = {
						name: '包季',
						enabled: this.noVipDataDetail.quarterlyDiscountEnabled,
						price1: this.noVipDataDetail.quarterlyDiscountPrice.toFixed(2),
						price2: this.noVipDataDetail.quarterlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.quarterlyPrice - this.noVipDataDetail.quarterlyDiscountPrice)
							.toFixed(2)
					}
				}
				if (val == 'monthly1') {
					this.choseItem = {
						name: '包月',
						enabled: this.noVipDataDetail.monthlyDiscountEnabled,
						price1: this.noVipDataDetail.monthlyDiscountPrice.toFixed(2),
						price2: this.noVipDataDetail.monthlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.monthlyPrice - this.noVipDataDetail.monthlyDiscountPrice)
							.toFixed(2)
					}
				}
				//连续包
				if (val == 'year2') {
					this.choseItem = {
						name: '连续包年',
						enabled: this.noVipDataDetail.yearlyContinuousEnabled,
						price1: this.noVipDataDetail.yearlyContinuousDuration.toFixed(2),
						price2: this.noVipDataDetail.yearlyPrice.toFixed(2),
						discount:null,
						// discount: (this.noVipDataDetail.yearlyPrice - this.noVipDataDetail.yearlyContinuousDuration)
						// 	.toFixed(2)
					}
				}
				if (val == 'half2') {
					this.choseItem = {
						name: '连续包半年',
						enabled: this.noVipDataDetail.halfContinuousEnabled,
						price1: this.noVipDataDetail.halfContinuousDuration.toFixed(2),
						price2: this.noVipDataDetail.halfPrice.toFixed(2),
						discount:null,
						// discount: (this.noVipDataDetail.halfPrice - this.noVipDataDetail.halfContinuousDuration)
						// 	.toFixed(2)
					}
				}
				if (val == 'quarterly2') {
					this.choseItem = {
						name: '连续包季',
						enabled: this.noVipDataDetail.quarterlyContinuousEnabled,
						price1: this.noVipDataDetail.quarterlyContinuousDuration.toFixed(2),
						price2: this.noVipDataDetail.quarterlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.quarterlyPrice - this.noVipDataDetail
							.quarterlyContinuousDuration).toFixed(2)
					}
				}
				if (val == 'monthly2') {
					this.choseItem = {
						name: '连续包月',
						enabled: this.noVipDataDetail.monthlyContinuousEnabled,
						price1: this.noVipDataDetail.monthlyContinuousDuration.toFixed(2),
						price2: this.noVipDataDetail.monthlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.monthlyPrice - this.noVipDataDetail.monthlyContinuousDuration)
							.toFixed(2)
					}
				}
				//单价
				if (val == 'year3') {
					this.choseItem = {
						name: '12个月',
						enabled: this.noVipDataDetail.yearlyEnabled, //开关
						price1: this.noVipDataDetail.yearlyPrice.toFixed(2),
						price2: this.noVipDataDetail.yearlyPrice.toFixed(2),
						discount: null
					}
				}
				if (val == 'half3') {
					this.choseItem = {
						name: '6个月',
						enabled: this.noVipDataDetail.halfEnabled, //开关
						price1: this.noVipDataDetail.halfPrice.toFixed(2),
						price2: this.noVipDataDetail.halfPrice.toFixed(2),
						discount: null
					}
				}
				if (val == 'quarterly3') {
					this.choseItem = {
						name: '3个月',
						enabled: this.noVipDataDetail.quarterlyEnabled,
						price1: this.noVipDataDetail.quarterlyPrice.toFixed(2),
						price2: this.noVipDataDetail.quarterlyPrice.toFixed(2),
						discount: null
					}
				}
				if (val == 'monthly3') {
					this.choseItem = {
						name: '1个月',
						enabled: this.noVipDataDetail.monthlyEnabled,
						price1: this.noVipDataDetail.monthlyPrice.toFixed(2),
						price2: this.noVipDataDetail.monthlyPrice.toFixed(2),
						discount: null
					}
				}
				this.name = this.choseItem.name
				this.buyPrice = this.choseItem.price1
				// this.buyPrice = this.choseItem.enabled==1 ? this.choseItem.price1 : this.choseItem.price2
				this.discount = this.choseItem.discount

				console.log(this.choseItem, this.buyPrice, this.discount)

				this.choseItemDetail = {
					payLevelDuration: this.choseItem.enabled,
					payLevelPrice: this.choseItem.price1,
					payLevelId: this.noVipDataDetail.id,
				}
			},
			//购买记录
			buyHistory() {
				uni.navigateTo({
					url: "/marketing_page/pages/member/purchase_history/purchase_history",
				});
			},
			// 会员协议
			toAgreement() {
				uni.navigateTo({
					url: '/marketing_page/pages/member/agreement/agreement'
				})
			},

		}
	};
</script>

<style lang="less" scoped>
	.notOpened {
		width: 100%;
		min-height: 100vh;
		position: relative;
	}

	.topBg {
		width: 750rpx;
		max-height: 900rpx;
		background: linear-gradient(180deg, #030507 0%, rgba(3, 5, 7, 0) 100%);
		border-radius: 0rpx;

		.title {
			width: 100%;
			height: 130rpx;
			line-height: 80rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #D8D8D8;
		}
	}

	.grade {
		width: 750rpx;
		height: 52rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		background-size: 106% 100%;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;

		>view {
			width: 20rpx;
			height: 20rpx;
			background-color: rgba(216, 216, 216, 0.4);
			border-radius: 50%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			>view {
				width: 12rpx;
				height: 12rpx;
				background: #D8D8D8;
				opacity: 1;
				border-radius: 50%;

				>text {
					position: absolute;
					top: -45rpx;
					right: -15rpx;
					color: #fff;
					font-size: 34rpx;
					display: block;
					width: 80rpx;
					height: 100rpx;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		>view:nth-of-type(1) {
			position: absolute;
			left: 100rpx;
			top: 14rpx;

			/deep/ text {
				font-size: 24rpx;
			}
		}

		>view:nth-of-type(2) {
			position: absolute;
			top: -10rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		>view:nth-of-type(3) {
			position: absolute;
			right: 100rpx;
			top: 14rpx;

			/deep/ text {
				font-size: 24rpx;
			}
		}
	}

	.vipLogo {
		width: 94%;
		min-height: 306rpx;
		margin: 24rpx auto;
		border-radius: 20rpx;
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: -110rpx center;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.headerIcon {
			width: 100rpx;
			height: 100rpx;
			background-color: #F5F7FA;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		.userPhone {
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			>view:nth-of-type(1) {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #D4BAA2;
			}

			>view:nth-of-type(2) {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 26rpx;
			}
		}
	}

	.package {
		width: 100%;
		background-color: #F5F7FA;
		// position: absolute;
		// top: 440rpx;
		// left: 0;
		border-radius: 20rpx;

		.membersList {
			width: 94vw;
			margin: 0 auto;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			overflow-x: scroll;
			overflow-y: hidden;
			padding: 40rpx 0rpx;
			box-sizing: border-box;

			.memberScrollList {
				flex: 1;
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			.memberItem {
				width: 220rpx;
				height: 280rpx;
				margin: 0 16rpx;
				background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
				box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
				border-radius: 16rpx;
				border: 1rpx solid #FFFFFF;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.tehui {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 40rpx;
					background: #F7A14A;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
				}

				.checked {
					position: absolute;
					top: -1rpx;
					right: -1rpx;
				}

				.lijianActive {
					position: absolute;
					bottom: -2rpx;
					left: -2rpx;
					width: 102%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: linear-gradient(179deg, #E8C889 0%, #EDBE60 100%);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.lijian {
					position: absolute;
					bottom: -2rpx;
					left: -2rpx;
					width: 102%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: linear-gradient(179deg, #E8C889 0%, #EDBE60 100%);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.memberActive {
				background: linear-gradient(179deg, rgba(232, 200, 137, 0.16) 0%, rgba(237, 190, 96, 0.16) 100%);
				border-radius: 16rpx;
				border: 1rpx solid #DB9132;
				overflow: hidden;
			}
		}

		.checked {
			width: 50rpx;
			height: 50rpx;
		}

		.tips {
			width: 94%;
			margin: 16rpx auto;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #606266;
		}
	}

	.rewardBox {
		width: 94%;
		margin: 16rpx auto;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #FFFFFF;

		.title {
			width: 240rpx;
			height: 57rpx;
			margin: -5rpx auto;
			font-size: 34rpx;
			text-align: center;
			line-height: 57rpx;
			font-weight: 400;
			color: #FFFFFF;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		.my-line {
			width: 217rpx;
			height: 2rpx;
			background: linear-gradient(319deg, #E3BE87 0%, #F4D9AE 55%, rgba(244, 217, 174, 0) 95%, rgba(244, 217, 174, 0) 100%);
			opacity: 1;
		}

		.my-dot {
			width: 11rpx;
			height: 10rpx;
			background: linear-gradient(84deg, #E5C18C 0%, #C19C68 100%);
			opacity: 1;
		}
	}

	.integralCouponList {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}

	.none {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #606266;
	}

	.integralCouponItem {
		width: 220rpx;
		height: 160rpx;
		position: relative;

		.box1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 70%;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.text-1 {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #606266;
		}

		.tip {
			background: #F7A14A;
			border-radius: 16rpx 16rpx 16rpx 0rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: -8px;
			padding: 0 10rpx;
			left: 85rpx;
		}
	}

	.cashCouponList {
		width: 100%;
		padding: 40rpx 40rpx 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.cashCouponItem {
		width: 180rpx;
		height: 180rpx;
		color: #fc724c;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		position: relative;
		margin-right: 42rpx;
		margin-bottom: 25rpx;

		>view:nth-of-type(1) {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #A26D35;
			position: absolute;
			top: 10rpx;
		}

		>view:nth-of-type(2) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 800;
			color: #F0703E;
		}

		>view:nth-of-type(3) {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FAD9B1;
			position: absolute;
			bottom: 15rpx;
		}
	}

	.cashCouponItem:nth-child(3n+3) {
		margin-right: 0rpx;
	}

	.desc {
		width: 94%;
		min-height: 385rpx;
		margin: 16rpx auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.activityTitle {
		width: 100%;
	}

	.activityLine {
		width: 100%;
		height: 1rpx;
		margin: 30rpx 0;
		background-color: #dcdfe6;
	}

	.activityContent {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #303133;
	}

	.bottomBtn {
		padding: 10rpx 20rpx;
		height: 88rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		width: 100%;

		.left {
			// flex: 1;
			margin: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			.left_top {
				height: 50%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.left_bottom {
				width: 100%;
				height: 50%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 22rpx;
				font-weight: 400;
				color: #909399;

				span {
					font-weight: bold;
				}
			}
		}

		.right {
			// margin-left: 22rpx;
			margin: 20rpx 40rpx 20rpx 0;
			width: 260rpx;
			height: 88rpx;
			border-radius: 44rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.mingxiMask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
	}

	.bottomBtn2 {
		width: 100%;
		height: 460rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.bottomBtn_top {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;

			.title {
				width: 100%;
				text-align: center;
				line-height: 40rpx;
			}

			.productItem {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>view:nth-of-type(1) {
					width: 100%;
					text-align: left;
				}

				>view:nth-of-type(2) {
					width: 100%;
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					>view:nth-of-type(1) {
						font-size: 26rpx;
						font-weight: 400;
						color: #606266;
					}

					>view:nth-of-type(2) {
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #FC724C;
					}
				}
			}
		}

		.closeIcon {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
		}

		.bottomBtn {
			padding: 10rpx 20rpx;
			height: 88rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			position: fixed;
			bottom: 0rpx;
			left: 0;
			background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
			box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			border: 2rpx solid rgba(255, 255, 255, 0.549);

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				.left_top {
					height: 50%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				.left_bottom {
					width: 100%;
					height: 50%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #909399;
				}
			}

			.right {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>